<!DOCTYPE html>
<html>
	<head>

	</head>
	<body>

		<div class="content">
			<div class="info">
				<span>score:</span><span class="score">0</span>
				<span>time:</span><span class="time">60</span>
			</div>
			<div id="box">

			</div>
		</div>

	</body>
	<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var time = [];
		var colors = ['gold', 'blue', 'green']
		$('.content').css('height', document.documentElement.clientHeight + 'px');
		$(document).mousemove(function(e) {
			if($('.time').text()!=0){
			$('#box').css('left', e.clientX + 'px');
			}
		})

		time[0] = setInterval(function() {
			$('.time').text(parseFloat($('.time').text()) - 1);
			if ($('.time').text() == 0) {
				for (var i = 0; i < time.length; i++) {
					clearInterval(time[i]);
				}
			}
		}, 1000)
		time[1] = setInterval(function() {
			for (var i = 0; i < Math.ceil(Math.random() * 5); i++) {
				$(".content").append('<div class="gold" style="left:' + Math.random() *
					document.documentElement.clientWidth + 'px;background-color:' + colors[Math.floor(Math.random() * 3)] +
					'"></div>');
			}
		}, 2000)
		time[2] = setInterval(function() {
			var n = 10;
			$(".gold").each(function() {
				//金币距离顶部的距离
				var topVal = parseFloat($(this).css('top')) + n;
				//金币距离左边的距离
				var leftVal = parseFloat($(this).css('left'));
				//金币的宽度
				var widthVal = parseFloat($(this).css('width'));
				//金币的高度
				var heightVal = parseFloat($(this).css('height'));
				//小人距离顶部的距离
				var boxTop = parseFloat($('#box').css('top'));
				//小人距离左边的距离
				var boxLeft = parseFloat($("#box").css('left'));
				//小人的宽度
				var boxWidth = parseFloat($('#box').css('width'));
				//小人的高度
				var boxHeight = parseFloat($('#box').css('height'));
				$(this).css('top', topVal + 'px');
				//当金币的高度大于可视宽度的时候让它消失
				if (topVal >= document.documentElement.clientHeight) {
					$(this).remove();
				}
				// topVal >= boxTop && topVal <= boxTop + boxHeight   
				// leftVal >= boxLeft && leftVal <= boxLeft + boxWidth 
				// 判断金币的左上角角是否与小人有交集
				// topVal >= boxTop && topVal <= boxTop + boxHeight 
				// leftVal + widthVal >= boxLeft && leftVal + widthVal <=boxLeft + boxWidth
				if (topVal >= boxTop && topVal <= boxTop + boxHeight || topVal + heightVal >= boxTop && topVal + heightVal <=
					boxTop + boxHeight) {
					if (leftVal >= boxLeft && leftVal <= boxLeft + boxWidth || leftVal + widthVal >= boxLeft && leftVal + widthVal <=
						boxLeft + boxWidth) {
						$(this).remove();
						var s = colors.indexOf($(this).css('background-color')) + 1
						$('.score').text(parseFloat($('.score').text()) + s);
					}
				}
			})
		}, 100)
	</script>
	<style>
		.content {
			position: relative;
		}

		.gold {
			width: 20px;
			height: 20px;
			position: absolute;
			top: 0;
			border-radius: 50%;
		}

		.info {
			position: absolute;
			top: 0;
			width: 300px;
		}

		#box {
			width: 50px;
			height: 50px;
			background-color: red;
			position: absolute;
			bottom: 0;
		}
	</style>
</html>
